<template>
	<div class="home">
		<!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
		<!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
		<!--<button @click="handleClick('back')">返回上一页</button>
		<button @click="handleClick('push')">跳转到parent</button>
		<button @click="handleClick('replace')">替换parent</button>
		<p>{{food}}</p>

		<button @click="getInfo" :style="{backgroundColor:bgColor}">请求数据</button>

		<img :src="url" alt="">

		<button @click="handleLogout">退出登录</button>-->

		<Row>
			<Col></Col>
		</Row>

		<Row :gutter="10">
			<Col span="12"></Col>
			<Col span="12"></Col>
		</Row>

		<Row :gutter="10">
			<Col span="8"></Col>
			<Col span="8"></Col>
			<Col span="8"></Col>
		</Row>

		<Row :gutter="10">
			<Col span="4" offset="1"></Col>
			<Col span="4"></Col>
			<Col span="4"></Col>
		</Row>

		<Row :gutter="10">
			<Col :md="6" :sm="12" :xs="24"></Col>
			<Col :md="6" :sm="12" :xs="24"></Col>
			<Col :md="6" :sm="12" :xs="24"></Col>
			<Col :md="6" :sm="12" :xs="24">{{rules}}</Col>
		</Row>

		<Button v-if="rules.edit_button">编辑</Button>
		<Button v-if="rules.publish_button">发布</Button>
	</div>
</template>

<script>
	// @ is an alias to /src
	import HelloWorld from "@/components/HelloWorld.vue";
	import {getUserInfo} from "@/api/user";
	import {mapActions, mapState} from 'vuex';

	export default {
		data() {
			return {url: '', bgColor: ''}
		},
		name: "home",
		components: {
			HelloWorld
		},
		props: {
			food: {
				type: String,
				default: "apple"
			}
		},
		computed: {
			...mapState({
				rules: state => state.user.rules
			})
		},
		beforeRouteEnter(to, from, next) {
			// to：当前路由对象，from：上一个路由对象
			next(vm => {
				console.log(vm);
			});
		},
		beforeRouteLeave(to, from, next) {
			// const leave = confirm("Are you confirm?");
			// if (leave) next();
			// else next(false);
			next();
		},
		methods: {
			...mapActions(['logout']),
			// 编程式导航
			handleClick(type) {
				//   this.$router.go(-1);
				if (type === "back") {
					this.$router.back();
				} else if (type === "push") {
					const name = "vue-cli-project";
					this.$router.push({
						// 写法1
						path: `/argu/${name}`
						// 写法2
						/* name:'argu',
						  params:{
							  name:'vue-cli'
						  } */
					});
				} else {
					this.$router.replace("/parent");
				}
			},
			getInfo() {
				/*Axios
					.get("https://api.github.com/users")
					.then(result => console.log(result))
					.catch(err => console.log(err));*/
				getUserInfo('Jack', 123).then(res => {
					console.log('res', res.data.data);
					this.url = res.data.data.img;
					this.bgColor = res.data.data.color;
				});
			},
			//退出登录
			handleLogout() {
				this.logout();
				this.$router.push({name: 'login'});
			}
		}
	};
</script>

<style lang="less">
	.home {
		.ivu-col {
			background: lightblue;
			margin-top: 10px;
			height: 50px;
			background-clip: content-box;
		}
	}
</style>
